<template>
  <div class="base-container">
    <t-loading text="提交中..." :fullscreen="false" attach="#main" :loading="applyLoading" size="medium"></t-loading>
    <div v-if="!isExpert"
      style="display: flex;justify-content: center;align-items: center;font-weight: bold;font-size: 50px;color: #ccc;height:100%">
      未开通专家角色.....</div>
    <div v-else class="content">
      <t-row :gutter="14">
        <t-col :span="isAdd ? 12 : 9">
          <t-tabs v-model="tabValue">
            <t-tab-panel value="0" label="基本信息" :destroyOnHide="true">
              <t-form ref="form" class="step-form" :data="formData" :rules="rules" labelWidth="0px">
                <div v-if="isAdd" class="form_item_title">账号信息</div>
                <t-row v-if="isAdd">
                  <t-col :span="2" class="title"><span class="require">*</span>登录名称：</t-col>
                  <t-col :span="4">
                    <t-form-item name="sysUser.userName">
                      <t-input clearable placeholder="请输入登录名" :maxlength="20" autocomplete="off"
                        v-model="formData.sysUser.userName">
                      </t-input>
                    </t-form-item>
                  </t-col>
                  <t-col :span="2" class="title"><span class="require">*</span>用户密码：</t-col>
                  <t-col :span="4">
                    <t-form-item name="sysUser.password">
                      <t-input clearable placeholder="请输入密码" autocomplete="new-password" :maxlength="20" type="password"
                        v-model="formData.sysUser.password"></t-input>
                    </t-form-item>
                  </t-col>
                </t-row>
                <div v-if="!isMy" class="form_item_title">业务权限</div>
                <t-row v-if="!isMy">
                  <t-col :span="2" class="title">业务权限：</t-col>
                  <t-col :span="10">
                    <t-form-item name="expertSystemType">
                      <t-checkbox-group v-model="formData.expertSystemType"
                        :options="dict.type.expert_system_type"></t-checkbox-group>
                    </t-form-item>
                  </t-col>
                </t-row>
                <t-row v-if="!isMy">
                  <t-col :span="2" class="title">专家来源：</t-col>
                  <t-col :span="10">
                    <t-form-item name="isInviteExpert">
                      <t-radio-group v-model="formData.isInviteExpert">
                        <t-radio value="0">内部专家</t-radio>
                        <t-radio value="1">外部邀请</t-radio>
                      </t-radio-group>
                    </t-form-item>
                  </t-col>
                </t-row>

                <div class="form_item_title">基本信息</div>
                <t-row>
                  <t-col :span="2" class="title">专家姓名：</t-col>
                  <t-col :span="4">
                    <t-form-item name="sysUser.nickName">
                      <t-input clearable placeholder="请输入专家姓名" v-model="formData.sysUser.nickName"></t-input>
                    </t-form-item>
                  </t-col>
                  <t-col :span="2" class="title"> 性别：</t-col>
                  <t-col :span="4">
                    <t-form-item name="sysUser.sex">
                      <t-radio-group v-model="formData.sysUser.sex" :options="dict.type.sys_user_sex"></t-radio-group>
                    </t-form-item>
                  </t-col>
                </t-row>
                <!-- 系统用户信息 -->
                <t-row>
                  <t-col :span="2" class="title">身份证号：</t-col>
                  <t-col :span="4">
                    <t-form-item name="sysUser.idCard">
                      <t-input clearable placeholder="请输入身份证号码" v-model="formData.sysUser.idCard"
                        @change="onIdCardChange" :maxlength="18" show-limit-number />
                    </t-form-item>
                  </t-col>
                  <t-col :span="2" class="title">出生年月：</t-col>
                  <t-col :span="4">
                    <t-form-item name="sysUser.birthDate">
                      <t-date-picker disabled v-model="formData.sysUser.birthDate"
                        style="margin-right: 15px"></t-date-picker>
                      (根据身份证号自动生成)
                    </t-form-item>
                  </t-col>
                </t-row>
                <t-row>
                  <t-col :span="2" class="title">民族：</t-col>
                  <t-col :span="4">
                    <t-form-item name="sysUser.national">
                      <t-select v-model="formData.sysUser.national" clearable placeholder="请选择民族"
                        :options="dict.type.national">
                      </t-select>
                    </t-form-item>
                  </t-col>
                  <t-col :span="2" class="title">政治面貌：</t-col>
                  <t-col :span="4">
                    <t-form-item name="sysUser.politicsStatus">
                      <t-select v-model="formData.sysUser.politicsStatus" clearable placeholder="请选择政治面貌"
                        :options="dict.type.politics_status">
                      </t-select>
                    </t-form-item>
                  </t-col>
                </t-row>
                <t-row>
                  <t-col :span="2" class="title"><t-tooltip content="选择的组别越靠前，推荐优先度越高，限制选两个">
                      <t-icon name="help-circle-filled"></t-icon>
                    </t-tooltip>组别：</t-col>
                  <t-col :span="4">
                    <t-form-item name="recommendMajor">
                      <t-select :max="2" v-model="formData.recommendMajor" :keys="{ keys: { value: 'id' } }"
                        :options="dict.type.recommend_major" placeholder="添加组别" multiple />
                    </t-form-item>
                  </t-col>
                  <t-col :span="2" class="title">电子信箱：</t-col>
                  <t-col :span="4">
                    <t-form-item name="sysUser.email">
                      <t-input clearable placeholder="请输入电子信箱" v-model="formData.sysUser.email"></t-input>
                    </t-form-item>
                  </t-col>

                </t-row>
                <t-row>
                  <t-col :span="2" class="title">通讯地址：</t-col>
                  <t-col :span="4">
                    <t-form-item name="sysUser.contactAds">
                      <t-input clearable placeholder="请输入通讯地址" v-model="formData.sysUser.contactAds"></t-input>
                    </t-form-item>
                  </t-col>
                  <t-col :span="2" class="title">邮政编码：</t-col>
                  <t-col :span="4">
                    <t-form-item name="sysUser.postcode">
                      <t-input clearable placeholder="请输入邮政编码" v-model="formData.sysUser.postcode"></t-input>
                    </t-form-item>
                  </t-col>
                </t-row>
                <t-row>
                  <t-col :span="2" class="title">手机号码：</t-col>
                  <t-col :span="4">
                    <t-form-item name="sysUser.phonenumber">
                      <t-input clearable placeholder="请输入手机号码" v-model="formData.sysUser.phonenumber"></t-input>
                    </t-form-item>
                  </t-col>
                  <!--              <t-col :span="2" class="title">请选择：</t-col>-->
                  <!--              <t-col :span="4">-->
                  <!--                <t-radio-group v-model="isExternalUnit">-->
                  <!--                  <t-radio :value="true">外部单位</t-radio>-->
                  <!--                  <t-radio :value="false">内部单位</t-radio>-->
                  <!--                </t-radio-group>-->
                  <!--              </t-col>-->
                  <t-col :span="2" class="title">单位名称：</t-col>
                  <t-col :span="4">
                    <t-form-item name="sysUser.departmentId">
                      <t-tree-select clearable filterable :treeProps="{ keys: { value: 'id' } }"
                        v-model="formData.sysUser.departmentId" :data="deptOptions" placeholder="选择单位"></t-tree-select>
                    </t-form-item>
                  </t-col>
                  <!--              <t-col v-show="isExternalUnit" :span="2" class="title"><span class="require">*</span>外部专家所在单位：</t-col>-->
                  <!--              <t-col v-show="isExternalUnit" :span="4">-->
                  <!--                <t-form-item  name="sysUser.outDepartName">-->
                  <!--                  <t-input clearable placeholder="请输入外部专家单位名称" v-model="formData.sysUser.outDepartName"></t-input>-->
                  <!--                </t-form-item>-->
                  <!--              </t-col>-->
                </t-row>
                <t-row>
                  <t-col :span="2" class="title">单位性质：</t-col>
                  <t-col :span="10">
                    <t-form-item name="coNature">
                      <t-radio-group v-model="formData.coNature" :options="dict.type.co_nature"></t-radio-group>
                    </t-form-item>
                  </t-col>
                </t-row>
                <t-row>
                  <t-col :span="2" class="title">单位所在地：</t-col>
                  <t-col :span="4">
                    <t-form-item name="coAddress">
                      <t-cascader clearable filterable :keys="{ value: 'id' }" v-model="formData.coAddress"
                        :options="locationOptions" placeholder="请选择单位所在地"></t-cascader>
                      <!--                    <t-tree-select clearable filterable :treeProps="{keys: {value: 'id'}}" v-model="formData.coAddress" :data="locationOptions" placeholder="请选择单位所在地" />-->
                    </t-form-item>
                  </t-col>
                  <t-col :span="2" class="title">职务：</t-col>
                  <t-col :span="4">
                    <t-form-item name="sysUser.duty">
                      <t-input clearable placeholder="请输入职务" v-model="formData.sysUser.duty"></t-input>
                    </t-form-item>
                  </t-col>
                </t-row>
                <t-row>
                  <t-col :span="2" class="title">技术职称：</t-col>
                  <t-col :span="4">
                    <t-form-item name="sysUser.profTitId">
                      <t-tree-select clearable @change="onProfTitIdChange" filterable style="width: 390px"
                        :treeProps="{ keys: { value: 'id', label: 'name' }, valueMode: 'onlyLeaf' }"
                        v-model="formData.sysUser.profTitId" :data="profTitOptions"
                        placeholder="请选择技术职称"></t-tree-select>
                    </t-form-item>
                  </t-col>
                  <t-col :span="2" class="title">职称级别：</t-col>
                  <t-col :span="4">
                    <t-form-item name="sysUser.profTit">
                      <t-select disabled v-model="formData.sysUser.profTit" clearable placeholder="请选择职称级别"
                        :options="dict.type.prof_tit">
                      </t-select>
                    </t-form-item>
                  </t-col>
                </t-row>
                <t-row>
                  <t-col :span="2" class="title">最高学历：</t-col>
                  <t-col :span="4">
                    <t-form-item name="sysUser.education">
                      <t-select v-model="formData.sysUser.education" clearable placeholder="请选择学历"
                        :options="dict.type.education">
                      </t-select>
                    </t-form-item>
                  </t-col>
                  <t-col :span="2" class="title">最后学位：</t-col>
                  <t-col :span="4">
                    <t-form-item name="sysUser.degree">
                      <t-select v-model="formData.sysUser.degree" clearable placeholder="请选择学位"
                        :options="dict.type.degree" />
                    </t-form-item>
                  </t-col>
                </t-row>
                <!--            <t-row>-->
                <!--              <t-col :span="2" class="title"><span class="require">*</span>最后学历毕业时间：</t-col>-->
                <!--              <t-col :span="4">-->
                <!--                <t-form-item  name="degreeDate">-->
                <!--                  <t-date-picker v-model="formData.degreeDate" clearable/>-->
                <!--                </t-form-item>-->
                <!--              </t-col>-->
                <!--              <t-col :span="2" class="title"><span class="require">*</span>最后学位获取时间：</t-col>-->
                <!--              <t-col :span="4">-->
                <!--                <t-form-item  name="educationDate">-->
                <!--                  <t-date-picker v-model="formData.educationDate" clearable/>-->
                <!--                </t-form-item>-->
                <!--              </t-col>-->
                <!--            </t-row>-->
                <!--            <t-row>-->
                <!--              <t-col :span="2" class="title"><span class="require">*</span>毕业院校：</t-col>-->
                <!--              <t-col :span="4">-->
                <!--                <t-form-item  name="sysUser.school">-->
                <!--                  <t-input clearable placeholder="请输入毕业院校" v-model="formData.sysUser.school"></t-input>-->
                <!--                </t-form-item>-->
                <!--              </t-col>-->
                <!--              <t-col :span="2" class="title"><span class="require">*</span>获得最终学位院校：</t-col>-->
                <!--              <t-col :span="4">-->
                <!--                <t-form-item  name="degreeSchool">-->
                <!--                  <t-input clearable placeholder="请输入最终学位院校" v-model="formData.degreeSchool"></t-input>-->
                <!--                </t-form-item>-->
                <!--              </t-col>-->
                <!--            </t-row>-->
                <t-row>
                  <t-col :span="2" class="title">所学专业：</t-col>
                  <t-col :span="4">
                    <t-form-item name="sysUser.majorName">
                      <t-input clearable v-model="formData.sysUser.majorName"></t-input>
                    </t-form-item>
                  </t-col>
                  <t-col :span="2" class="title">现从事专业：</t-col>
                  <t-col :span="4">
                    <t-form-item name="sysUser.majorNowName">
                      <t-input clearable v-model="formData.sysUser.majorNowName"></t-input>
                    </t-form-item>
                  </t-col>
                </t-row>
                <t-row>
                  <t-col :span="2" class="title">办公电话：</t-col>
                  <t-col :span="4">
                    <t-form-item name="telephone">
                      <t-input clearable placeholder="请输入办公电话" v-model="formData.telephone"></t-input>
                    </t-form-item>
                  </t-col>
                  <!--              <t-col :span="2" class="title"><span class="require">*</span>分级：</t-col>-->
                  <!--              <t-col :span="4">-->
                  <!--                <t-form-item  name="classification">-->
                  <!--                  <t-select v-model="formData.classification" clearable placeholder="请选择分级" :options="dict.type.classification" />-->
                  <!--                </t-form-item>-->
                  <!--              </t-col>-->
                </t-row>
                <!-- <t-row>
                  <t-col :span="2" class="title"><span class="require">*</span>专家省份：</t-col>
                  <t-col :span="4">
                    <t-form-item  name="province">
                      <t-input clearable placeholder="请输入专家省份" v-model="formData.province"></t-input>
                    </t-form-item>
                  </t-col>
                  <t-col :span="2" class="title"><span class="require">*</span>省内或省外专家：</t-col>
                  <t-col :span="4">
                    <t-form-item  name="ioProvince">
                      <t-select v-model="formData.ioProvince" clearable placeholder="请选择" :options="dict.type.io_province">
                      </t-select>
                    </t-form-item>
                  </t-col>
                </t-row> -->
                <!--            <t-row>-->
                <!--              <t-col :span="2" class="title">办公电话：</t-col>-->
                <!--              <t-col :span="4">-->
                <!--                <t-form-item  name="telephone">-->
                <!--                  <t-input clearable placeholder="请输入办公电话" v-model="formData.telephone"></t-input>-->
                <!--                </t-form-item>-->
                <!--              </t-col>-->
                <!--            </t-row>-->
                <t-row>
                  <!--              <t-col :span="2" class="title"><span class="require">*</span>专家类别：</t-col>-->
                  <!--              <t-col :span="4">-->
                  <!--                <t-form-item  name="expertCategory">-->
                  <!--                  <t-select v-model="formData.expertCategory" clearable placeholder="请选择专家类别" :options="dict.type.expert_category" />-->
                  <!--                </t-form-item>-->
                  <!--              </t-col>-->
                  <t-col :span="2" class="title">专家荣誉：</t-col>
                  <t-col :span="10" style="display: flex;flex-direction: column">
                    <t-form-item name="expertHonorary">
                      <t-checkbox-group v-model="formData.expertHonorary" style="flex-direction: column"
                        :options="dict.type.expert_honorary" />
                    </t-form-item>
                    <t-textarea v-if="formData?.expertHonorary?.includes('99')" v-model="formData.otherExpertHonorary"
                      :autosize="{ minRows: 3 }" placeholder="请输入其他荣誉" />
                  </t-col>
                </t-row>
                <t-row>
                  <t-col :span="2" class="title">主要业绩：</t-col>
                  <t-col :span="10">
                    <t-textarea :autosize="{ minRows: 3 }" clearable placeholder="请输入主要业绩"
                      v-model="formData.performance" />
                  </t-col>
                </t-row>
                <!--            <t-row>-->
                <!--              <t-col :span="2" class="title">其他学术成就：</t-col>-->
                <!--              <t-col :span="10">-->
                <!--                <t-input  clearable placeholder="请输入其他学术成就" v-model="formData.academicSuccess" />-->
                <!--              </t-col>-->
                <!--            </t-row>-->
                <!--            <t-row>-->
                <!--              <t-col :span="2" class="title">专家经验：</t-col>-->
                <!--              <t-col :span="10">-->
                <!--                <t-form-item  name="expertExpertise">-->
                <!--                  <t-checkbox-group v-model="formData.expertExpertise" style="flex-direction: column"-->
                <!--                                    :options="dict.type.expert_expertise">-->
                <!--                  </t-checkbox-group>-->
                <!--                </t-form-item>-->
                <!--              </t-col>-->
                <!--            </t-row>-->
                <!-- 专家分类 -->
                <!-- <t-row>
                  <t-col :span="2" class="title"><span class="require">*</span>专家分类：</t-col>
                  <t-col :span="10">
                    <div class="expert_category_body">
                      <div class="expert_category_item" v-for="(item,index) in dict.type.expert_category" :key="index">
                        <div class="expert_category">{{ item.label }}</div>
                        <t-form-item name="expertSubclass">
                          <t-checkbox-group v-model="formData.expertCategorys.expertSubclass[index]" :key="index" style="flex-direction: column"
                            :options="filterExpertSubclass(item.value)">
                          </t-checkbox-group>
                        </t-form-item>
                      </div>
                    </div>
                  </t-col>
                </t-row> -->

                <div class="form_item_title">银行信息</div>
                <t-row>
                  <t-col :span="2" class="title" style="display: flex;flex-direction: column;text-align: right">
                    <span style="width: 100%;">开户银行名称：</span>
                    <span style="width: 84%;color: red !important;font-size: 12px;text-align: right">(请精确到支行)</span>
                  </t-col>
                  <t-col :span="4">
                    <t-form-item name="expertBank.bankName">
                      <t-input clearable placeholder="请输入开户银行全称" v-model="formData.expertBank.bankName"></t-input>
                    </t-form-item>
                  </t-col>
                  <t-col :span="2" class="title">开户户名：</t-col>
                  <t-col :span="4">
                    <t-form-item name="expertBank.bankUsername">
                      <t-input clearable placeholder="请输入开户户名" v-model="formData.expertBank.bankUsername"></t-input>
                    </t-form-item>
                  </t-col>
                </t-row>
                <t-row>
                  <t-col :span="2" class="title">开户账号：</t-col>
                  <t-col :span="4">
                    <t-form-item name="expertBank.accountName">
                      <t-input clearable placeholder="请输入开户账号" v-model="formData.expertBank.accountName"></t-input>
                    </t-form-item>
                  </t-col>
                  <!--              <t-col :span="2" class="title">所属支行名称：</t-col>-->
                  <!--              <t-col :span="4">-->
                  <!--                <t-form-item  name="expertBank.bankDetailName">-->
                  <!--                  <t-input clearable placeholder="请输入支行名称" v-model="formData.expertBank.bankDetailName"></t-input>-->
                  <!--                </t-form-item>-->
                  <!--              </t-col>-->
                </t-row>
                <div style="display:flex;justify-content: center;align-items: center;padding: 20px"><t-button
                    size="large" theme="primary" @click="submit">提交</t-button></div>

              </t-form>
            </t-tab-panel>
            <t-tab-panel value="2" label="个人简介" :destroyOnHide="true">
              <expert-about :objId="objId"></expert-about>
            </t-tab-panel>
            <!--        <t-tab-panel v-if="isAdd" value="3" label="研究成果" :destroyOnHide="true">-->
            <!--          <expert-result :objId="objId"></expert-result>-->
            <!--        </t-tab-panel>-->
            <!--        <t-tab-panel v-if="isAdd" value="4" label="项目承担情况" :destroyOnHide="true">-->
            <!--          <expert-project :objId="objId"></expert-project>-->
            <!--        </t-tab-panel>-->
            <!--        <t-tab-panel value="5" label="附件信息" :destroyOnHide="true">-->
            <!--          <expert-file></expert-file>-->
            <!--        </t-tab-panel>-->
          </t-tabs>
        </t-col>
        <t-col :span="3" v-if="!isAdd">
          <t-card class="user-intro step-card" :bordered="false">
            <t-avatar v-if="formData.sysUser.avatar" size="100px" :image="formData.sysUser.avatar">
            </t-avatar>
            <t-avatar v-else size="100px">
              {{ formData.sysUser.nickName }}
            </t-avatar>
            <file-upload @success="onAvatar" accept="image/*" v-model="avatarFileIds" moduleKey="avatar"
              :fileList="avatarFileLists" tips="">
              <template #fileListDisplay>
                <div></div>
              </template>
              <t-icon
                style="position: absolute;top:120px;left:120px;color: var(--td-brand-color);z-index: 10;background-color: white; border-radius: 50%;"
                size="30px" name="cloud-upload"></t-icon>
            </file-upload>
            <div class="name">{{ formData.sysUser.nickName }}</div>
            <div class="position">{{ formData.sysUser.duty }}</div>
          </t-card>
          <t-card class="step-card" size="small" title="电子签名(必填)">
            <div style="margin-top: 10px">
              <t-popup trigger="click">
                <!--                                    @click="(signDialog.open = true)"-->
                <t-button @click="openRefreshF" variant="dashed" theme="primary">
                  <t-icon :name="signatureFiles.length > 0 > 0 ? 'edit-1' : 'add-circle'" slot="icon"
                    style="margin-right: 3px" />
                  {{ signatureFiles.length > 0 ? '更新在线签名' : '添加在线签名' }}
                </t-button>
                <template #content>
                  <h3>手机扫码签名</h3>
                  <qrcode-vue :value="qrcodeValue" :size="192" level="H" />

                </template>
              </t-popup>
            </div>
            <div v-if="signatureFiles.length > 0" style="margin-top: 20px">
              <img :src="signatureFiles[0].url" width="150" height="70" style="border: 2px dashed #d3d3d3;" />
            </div>
          </t-card>
        </t-col>
      </t-row>
    </div>
  </div>
</template>

<script lang="jsx">
import { getDictList } from "@/api/system/dict/data";
import ExpertAbout from "./expert-about.vue"
import ExpertResult from "./expert-result.vue"
import ExpertProject from "./expert-project.vue"
import { getIdCardBirthday, getIdCardAge } from '@/utils/common';
import { encrypt } from "@/utils/jsencrypt";
import FileUpload from "@/components/FileUpload/index.vue";
import QrcodeVue from 'qrcode.vue';
import { getFiles } from "@/api/common"
import { getToken } from "@/utils/auth";


export default {
  name: "expert-detail",
  dicts: ["sys_user_sex", "national", "classification", "prof_tit", "education", "degree", "co_nature", "io_province", "expert_expertise", "expert_honorary", "expert_category", "expert_subclass", "recommend_major", "politics_status", "expert_system_type"],
  components: {
    // ExpertSubject,
    ExpertAbout,
    ExpertResult,
    ExpertProject,
    // ExpertFile,
    FileUpload,
    QrcodeVue
  },
  data () {
    return {
      visible1: false,
      applyLoading: false,
      isAdd: true,
      objId: 0,
      dataLoading: false,
      isExternalUnit: false,
      isExpert: true,
      isMy: false,
      refreshStart: false,
      avatarFileIds: [],
      avatarFileLists: [],
      signatureFiles: [],
      qrcodeValue: '',
      rules: {
        // "expertSystemType": [
        //   { required: false, validator: (val) => val && val.length, message: `业务权限不能为空`, type: "error" }
        // ],
        // "isInviteExpert": [
        //   {
        //     required: false,
        //     message: "专家来源不能为空",
        //   },
        // ],
        "sysUser.userName": [
          {
            required: true,
            message: "登录名不能为空",
          },
          {
            min: 2,
            max: 20,
            message: "登录名称长度必须介于 2 和 20 之间",
          },
        ],
        "sysUser.password": [
          {
            required: true,
            message: "用户密码不能为空",
          },
          {
            pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9~!@#$%^&*]{8,20}/,
            message: '请输入 8-20 个字符，需同时包含数字、大小写字母以及特殊符号',
            type: 'error',
          },
        ],
        // "sysUser.nickName": [
        //   {
        //     required: false,
        //     message: "专家姓名不能为空",
        //   },
        // ],
        // "sysUser.idCard": [
        //   {
        //     required: false,
        //     message: "身份证号不能为空",
        //   },
        //   {
        //     message: "身份证号不正确",
        //     pattern: /^\d{6}((((((19|20)\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|(((19|20)\d{2})(0[13578]|1[02])31)|((19|20)\d{2})02(0[1-9]|1\d|2[0-8])|((((19|20)([13579][26]|[2468][048]|0[48]))|(2000))0229))\d{3})|((((\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|((\d{2})(0[13578]|1[02])31)|((\d{2})02(0[1-9]|1\d|2[0-8]))|(([13579][26]|[2468][048]|0[048])0229))\d{2}))(\d|X|x)$/,
        //   },
        // ],
        // "sysUser.national": [
        //   {
        //     required: false,
        //     message: "民族不能为空",
        //   },
        // ],
        // "sysUser.politicsStatus": [
        //   {
        //     required: false,
        //     message: "政治面貌不能为空",
        //   },
        // ],
        // "recommendMajor": [
        //   { required: false, validator: (val) => val && val.length, message: `组别不能为空`, type: "error" }
        // ],
        // "sysUser.departmentId": [
        //   {
        //     required: false,
        //     message: "单位名称不能为空",
        //   },
        // ],
        // "coNature": [
        //   {
        //     required: false,
        //     message: "单位性质不能为空",
        //   },
        // ],
        // "coAddress": [
        //   {
        //     required: false,
        //     message: "单位所在地不能为空",
        //   },
        // ],
        // "sysUser.duty": [
        //   {
        //     required: false,
        //     message: "职务不能为空",
        //   },
        // ],
        // "sysUser.profTitId": [
        //   {
        //     required: false,
        //     message: "技术职称不能为空",
        //   },
        // ],
        // "sysUser.education": [
        //   {
        //     required: false,
        //     message: "最高学历不能为空",
        //   },
        // ],
        // "sysUser.degree": [
        //   {
        //     required: false,
        //     message: "最后学位不能为空",
        //   },
        // ],
        // "degreeDate": [
        //   {
        //     required: false,
        //     message: "最后学历毕业时间不能为空",
        //   },
        // ],
        // "educationDate": [
        //   {
        //     required: false,
        //     message: "最后学位获取时间不能为空",
        //   },
        // ],
        // "sysUser.school": [
        //   {
        //     required: false,
        //     message: "毕业院校不能为空",
        //   },
        // ],
        // "degreeSchool": [
        //   {
        //     required: false,
        //     message: "获得最终学位院校不能为空",
        //   },
        // ],
        // "sysUser.majorName": [
        //   {
        //     required: false,
        //     message: "所学专业不能为空",
        //   },
        // ],
        // "sysUser.majorNowName": [
        //   {
        //     required: false,
        //     message: "现从事专业不能为空",
        //   },
        // ],
        // "classification": [
        //   {
        //     required: false,
        //     message: "分级不能为空",
        //   },
        // ],
        // "sysUser.phonenumber": [
        //   {
        //     required: false,
        //     message: "手机号不能为空",
        //   },
        //   {
        //     pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
        //     message: "请输入正确的手机号码",
        //   },
        // ],
        // "expertCategory": [
        //   {
        //     required: false,
        //     message: "专家类别不能为空",
        //   },
        // ],
        // "expertBank.bankUsername": [
        //   {
        //     required: false,
        //     message: "开户户名不能为空",
        //   },
        // ],
        // "expertBank.bankName": [
        //   {
        //     required: false,
        //     message: "开户银行名称不能为空",
        //   },
        // ],
        // "expertBank.accountName": [
        //   {
        //     required: true,
        //     message: "开户账号不能为空",
        //   },
        //   {
        //     pattern: /^[1-9]\d{9,29}$/,
        //     message: "请输入正确的开户账号",
        //   },
        // ]
      },
      requiredData: {
        userName: 'default',
        password: 'default',
      },
      formData: {
        isInviteExpert: '0',
        expertSystemType: [],
        otherExpertHonorary: '',
        // expertName: "",
        // phoneNumber: undefined,
        telephone: undefined,
        // sex: undefined,
        departmentId: null,
        majorName: '',
        secondMajor: undefined,
        classification: undefined,
        idCard: undefined,
        // duty: undefined,
        // profTitId: undefined,
        // profTit: undefined,
        performance: undefined,
        // education: undefined,
        // degree: undefined,
        degreeDate: undefined,
        educationDate: undefined,
        // school: undefined,
        degreeSchool: undefined,
        majorNowName: undefined,
        externalCo: undefined,
        coNature: undefined,
        coAddress: undefined,
        province: undefined,
        ioProvince: undefined,
        academicSuccess: undefined,
        expertCategory: undefined,
        expertHonorary: [],
        expertExpertise: [],
        recommendMajor: [],
        // birthDate: undefined,
        sysUser: {
          userName: '',
          nikeName: '',
          password: '',
          sex: '1',
          email: '',
          national: '',
          politicsStatus: '',
          birthDate: '',
          contactAds: '',
          postcode: '',
          phonenumber: '',
          departmentId: null,
          // outDepartName: '',
          majorName: '',
          majorNowName: '',
          idCard: '',
          duty: '',
          profTit: '',
          education: '',
          degree: '',
          school: '',
        },
        expertBank: {
          bankName: undefined,
          bankUsername: undefined,
          accountName: undefined,
          bankDetailName: undefined,
        },
        // expertCategorys: []
      },
      tabValue: '0',
      locationOptions: [],
      deptOptions: [],
      profTitOptions: [],
      tabList: [
        {
          label: '基本信息',
          value: '0',
        },
        // {
        //   label: '擅长学科',
        //   value: '1',
        // },
        {
          label: '个人简介',
          value: '2',
        },
        {
          label: '研究成果',
          value: '3',
        },
        {
          label: '承担项目情况',
          value: '4',
        },
        // {
        //   label: '附件信息',
        //   value: '5',
        // },
      ],
      timer: null,
    }
  },
  created () {
    this.qrcodeValue = `${window.location.origin}/online-signature/?code=${getToken()}`;
    this.getTreeselect();
    this.getProfTitTreeSelect();
    const objId = this.$route.params && this.$route.params.objId;
    if (objId === "0") {
      this.isAdd = true;
      this.formData.expertSystemType.push("xtzj")
    } else {
      this.isAdd = false;
    }
    if (objId && objId !== '0') {
      this.objId = objId;
      this.getObj(objId);
      // eslint-disable-next-line no-empty
    } else if (this.$route.path.search('expert-add') !== -1) {
      console.log("add")
    } else {
      this.$api.zjk.expert.getExpertsInfo().then(res => {
        if (!res.data) {
          this.isExpert = false;
        } else {
          this.objId = res.data.id
          this.formatData(res);
          getFiles(this.formData.sysUser.id).then((res) => {
            const files = {}
            res.data.forEach((item) => {
              if (!files[item.moduleKey]) {
                files[item.moduleKey] = []
              }
              files[item.moduleKey].push({
                name: item.fileName,
                url: item.fullFilePath,
                id: item.id,
                filePath: item.filePath
              })
            })
            // if (files.signature && files.signature.length > 1) {
            //   files.signature.reverse()
            // }
            this.signatureFiles = files.signature || []
            this.refreshStart = false;
          }).catch(e => {
            this.refreshStart = false;
            this.$message.error(e.toString())
          })
        }
        this.isMy = true;
      }).catch((e) => {
        this.$message.error(e.toString());
      })
    }

  },
  methods: {
    formatData (res) {
      // res.data.duty = res.data.duty.split(",").filter(item=> item !== '');
      res.data.expertHonorary = res.data.expertHonorary ? res.data.expertHonorary.split(",").filter(item => item !== '') : [];
      res.data.recommendMajor = res.data.recommendMajor ? res.data.recommendMajor.split(",").filter(item => item !== '') : [];
      res.data.expertExpertise = res.data.expertExpertise ? res.data.expertExpertise.split(",").filter(item => item !== '') : [];
      res.data.expertSystemType = res.data.expertSystemType ? res.data.expertSystemType.split(",").filter(item => item !== '') : [];
      // 防止t-date-picker组件报错
      res.data.birthDate = res.data.birthDate ? res.data.birthDate : undefined;
      // 单位名称和单位所在地存储的是字符串导致filterByTree无法获取到值
      res.data.coAddress = res.data.coAddress ? Number(res.data.coAddress) : undefined;
      res.data.expertBank = res.data.expertBank ? res.data.expertBank : {}
      if (res.data.externalCo && res.data.externalCo !== '') {
        this.isExternalUnit = true
      }
      this.formData = res.data;
    },
    getObj (objId) {
      this.$api.zjk.expert.get(objId).then(
        (res) => {
          this.formatData(res);
          getFiles(this.formData.sysUser.id).then((res) => {
            const files = {}
            res.data.forEach((item) => {
              if (!files[item.moduleKey]) {
                files[item.moduleKey] = []
              }
              files[item.moduleKey].push({
                name: item.fileName,
                url: item.fullFilePath,
                id: item.id,
                filePath: item.filePath
              })
            })
            // if (files.signature && files.signature.length > 1) {
            //   files.signature.reverse()
            // }
            this.signatureFiles = files.signature || []
            this.refreshStart = false;
          }).catch(e => {
            this.refreshStart = false;
            this.$message.error(e.toString())
          })
        }).catch((e) => {
          this.$message.error(e.toString());
        });
    },
    submit () {
      const data = {
        ...this.formData,
        // duty: this.formData.duty.join(","),
        expertHonorary: this.formData?.expertHonorary?.join(","),
        recommendMajor: this.formData?.recommendMajor?.join(","),
        expertExpertise: this.formData?.expertExpertise?.join(","),
        expertSystemType: this.formData?.expertSystemType?.join(","),
        sysUser: {
          ...this.formData.sysUser,
        },
        expertBank: {
          bankName: encrypt(this.formData.expertBank.bankName),
          bankUsername: encrypt(this.formData.expertBank.bankUsername),
          accountName: encrypt(this.formData.expertBank.accountName)
        }
        // expertCategory: expertCategory.join(","),
        // expertSubclass: expertSubclass.join(",")
      }
      if (this.isMy) {
        this.$refs.form.validate().then((validateResult) => {
          if (validateResult === true) {
            // 判断是否有签名
            if (this.signatureFiles.length <= 0) {
              this.$message.error('电子签名不能为空');
              return false;
            }
            this.applyLoading = true;

            if (this.formData.id) {
              this.$api.zjk.expert.editMy(data).then(() => {
                this.$message.success('修改成功');
                this.applyLoading = false
              }).catch(e => {
                this.applyLoading = false
                this.$message.error(e.toString());
              })

            } else {
              this.$api.zjk.expert.add({
                ...data,
                sysUser: {
                  ...this.formData.sysUser,
                  password: encrypt(this.formData.sysUser.password),
                }
              }).then((response) => {
                this.formData.id = response.data.id;
                this.$message.success('新增成功');
                this.applyLoading = false
                this.close();
              }).catch(e => {
                this.applyLoading = false
                this.$message.error(e.toString());
              })
            }
          } else {
            const firstError = Object.values(validateResult)[0]?.[0]?.message;
            this.$message.error(firstError);
          }
        });
      } else {
        this.$refs.form.validate({
          fields: ['sysUser.userName', 'sysUser.password', 'expertSystemType', 'isInviteExpert', 'sysUser.nickName', 'sysUser.phonenumber', 'expertBank.bankName', 'expertBank.bankUsername', 'expertBank.accountName']
        }).then((validateResult) => {
          if (validateResult === true) {
            this.applyLoading = true;
            if (this.formData.id) {
              this.$api.zjk.expert.edit(data).then(() => {
                this.$message.success('修改成功');
                this.applyLoading = false
              }).catch(e => {
                this.applyLoading = false
                this.$message.error(e.toString());
              })
            } else {
              this.$api.zjk.expert.add({
                ...data,
                sysUser: {
                  ...this.formData.sysUser,
                  password: encrypt(this.formData.sysUser.password),
                }
              }).then((response) => {
                this.formData.id = response.data.id;
                this.$message.success('新增成功');
                this.applyLoading = false
                this.close();
              }).catch(e => {
                this.applyLoading = false
                this.$message.error(e.toString());
              })
            }
          } else {
            const firstError = Object.values(validateResult)[0]?.[0]?.message;
            this.$message.error(firstError);
          }
        });
      }
    },
    close () {
      this.applyLoading = false;
      setTimeout(() => {
        this.$tab.closeOpenPage({ path: "/zjk/expert/expert-index" });
      }, 1000)
    },
    /** 查询菜单下拉树结构 */
    getTreeselect () {
      this.$api.system.dept.treeSelectAll().then(response => {
        this.deptOptions = response.data;
      }).catch((e) => {
        this.$message.error(e.toString());
      });
      this.$api.system.location.treeselect().then(response => {
        this.locationOptions = response.data;
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    filterExpertSubclass (key) {
      return this.dict.type.expert_subclass.filter((val) => val?.value.includes(`${key}-`))
    },
    onIdCardChange (val) {
      const birthday = getIdCardBirthday(val);
      if (birthday !== "") {
        this.formData.sysUser.birthDate = birthday
      }
    },
    getProfTitTreeSelect () {
      return this.$api.system.profTit.highList().then(response => {
        // this.profTitOptions = response.data;
        this.profTitOptions = this.handleTree(response.data, "id");
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    onProfTitIdChange (val, content) {
      this.formData.sysUser.profTit = content.node.data.level;
    },
    onAvatar (ids, files) {
      this.$api.system.user.updateUserProfile({
        avatar: files[0].url,
      }).then(response => {
        this.formData.avatar = files[0].url;
        this.$message.success("上传成功");
      }).catch((e) => {
        this.$message.error(e.toString());
      });

    },
    refreshFile () {
      this.refreshStart = true;
      getFiles(this.formData.sysUser.id).then((res) => {
        const files = {}
        res.data.forEach((item) => {
          if (!files[item.moduleKey]) {
            files[item.moduleKey] = []
          }
          files[item.moduleKey].push({
            name: item.fileName,
            url: item.fullFilePath,
            id: item.id,
            filePath: item.filePath
          })
        })
        // if (files.signature && files.signature.length > 1) {
        //   files.signature.reverse()
        // }
        this.signatureFiles = files.signature || []
        this.refreshStart = false;
      }).catch(e => {
        this.refreshStart = false;
        this.$message.error(e.toString())
      })
    },
    openRefreshF () {
      this.timer = setInterval(this.refreshFile, 1000);
    },
  },
  beforeDestroy () {
    clearInterval(this.timer);
  },
}
</script>
<style lang="less" scoped>
.base-container {
  .step-form {
    .t-tab-panel {
      padding: 10px;
    }

    .form_item_title {
      display: flex;
      justify-content: center;
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 15px;
      margin-top: 15px;
    }

    .t-row {
      align-items: stretch;

      .t-form__item {
        width: 100%;
      }

      .require {
        color: red;
        margin-right: 3px;
      }

      .t-col {
        border: 1px solid #ddd;
        color: #333;
        min-height: 37px;
        padding: 4px !important;
        overflow: hidden;
        display: flex;
        align-items: center;
        margin: 0px -1px -1px 0px;
      }

      .title {
        background-color: #FAFAFA;
        justify-content: flex-end;
        margin: 0px -1px -1px 0px;
        color: #606266;
      }
    }
  }
}

.expert_category_body {
  .expert_category_item {
    margin-bottom: 10px;
  }
}

/deep/ .t-form__label {
  display: none;
}

/deep/ .t-input__extra {
  position: initial;
}

/deep/ .t-upload__tips-error {
  display: none;
}

@import '@/style/variables';

.user-intro {
  padding: 32px 24px;
  background: var(--td-brand-color);
  border-radius: @border-radius;
  color: var(--td-text-color-primary);

  .name {
    line-height: 37px;
    font-size: 20px;
    margin-top: 36px;
    color: #fff;
  }

  .position {
    line-height: 24px;
    font-size: 14px;
    margin-top: 8px;
    color: #fff;
  }

  .user-info {
    line-height: 24px;
    font-size: 14px;
    color: var(--td-text-color-primary);

    .hiredate,
    .del,
    .mail {
      display: flex;
    }

    .t-icon {
      height: 24px;
      margin-right: 8px;
    }

    .del {
      margin: 16px 0;
    }
  }
}

.step-card {
  margin-bottom: 14px;
}
</style>
